<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>图片 | VitePress基础框架</title>
    <meta name="description" content="VitePress基础框架的站点描述">
    <meta name="generator" content="VitePress v1.3.4">
    <link rel="preload stylesheet" href="/vitepress-template-public/assets/style.Bh2VXVad.css" as="style">
    <script type="module" src="/vitepress-template-public/assets/chunks/metadata.6b2f4039.js"></script>
    <script type="module" src="/vitepress-template-public/assets/app.CtFKj54A.js"></script>
    <link rel="preload" href="/vitepress-template-public/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/vitepress-template-public/assets/chunks/theme.CHXT_227.js">
    <link rel="modulepreload" href="/vitepress-template-public/assets/chunks/framework.BCtciejH.js">
    <link rel="modulepreload" href="/vitepress-template-public/assets/chunks/image.CWg-3RUW.js">
    <link rel="modulepreload" href="/vitepress-template-public/assets/guide_plugin_image.md.Lryc1rmB.lean.js">
    <link rel="icon" type="image/svg+xml" href="/vitepress-template-public/logo/vitepress-logo-mini.svg">
    <link rel="icon" type="image/png" href="/vitepress-template-public/logo/vitepress-logo-mini.png">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-e7ae3156><!--[--><!--]--><!--[--><span tabindex="-1" data-v-b6dc82ed></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-b6dc82ed> Skip to content </a><!--]--><!----><header class="VPNav" data-v-e7ae3156 data-v-dd74d679><div class="VPNavBar" data-v-dd74d679 data-v-f294b04e><div class="wrapper" data-v-f294b04e><div class="container" data-v-f294b04e><div class="title" data-v-f294b04e><div class="VPNavBarTitle has-sidebar" data-v-f294b04e data-v-612ad8f1><a class="title" href="/vitepress-template-public/" data-v-612ad8f1><!--[--><!--]--><!--[--><img class="VPImage logo" src="/vitepress-template-public/logo/vitepress-logo-mini.svg" width="24" height="24" alt data-v-50300c68><!--]--><span data-v-612ad8f1>VitePress基础框架</span><!--[--><!--]--></a></div></div><div class="content" data-v-f294b04e><div class="content-body" data-v-f294b04e><!--[--><!--]--><div class="VPNavBarSearch search" data-v-f294b04e><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="搜索文档"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">搜索文档</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-f294b04e data-v-fa8254e6><span id="main-nav-aria-label" class="visually-hidden" data-v-fa8254e6> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/vitepress-template-public/guide/install" tabindex="0" data-v-fa8254e6 data-v-8b7bfc54><!--[--><span data-v-8b7bfc54>教程</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vitepress-template-public/examples/markdown" tabindex="0" data-v-fa8254e6 data-v-8b7bfc54><!--[--><span data-v-8b7bfc54>示例</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-fa8254e6 data-v-e261b7a7><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-e261b7a7><span class="text" data-v-e261b7a7><!----><span data-v-e261b7a7>下拉导航</span><span class="vpi-chevron-down text-icon" data-v-e261b7a7></span></span></button><div class="menu" data-v-e261b7a7><div class="VPMenu" data-v-e261b7a7 data-v-0430342e><div class="items" data-v-0430342e><!--[--><!--[--><div class="VPMenuGroup" data-v-0430342e data-v-11db401e><p class="title" data-v-11db401e>下拉导航标题</p><!--[--><!--[--><div class="VPMenuLink" data-v-11db401e data-v-3da97ee6><a class="VPLink link vp-external-link-icon" href="https://github.com/dcdy/vitepress-template/edit/main/docs/.vitepress/config.mts" target="_blank" rel="noreferrer" data-v-3da97ee6><!--[-->子项A<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-11db401e data-v-3da97ee6><a class="VPLink link vp-external-link-icon" href="https://gitee.com/xia_mei_ting/vitepress-template/blob/main/docs/.vitepress/config.mts" target="_blank" rel="noreferrer" data-v-3da97ee6><!--[-->子项B<!--]--></a></div><!--]--><!--]--></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-fa8254e6 data-v-e261b7a7><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-e261b7a7><span class="text" data-v-e261b7a7><!----><span data-v-e261b7a7>设置</span><span class="vpi-chevron-down text-icon" data-v-e261b7a7></span></span></button><div class="menu" data-v-e261b7a7><div class="VPMenu" data-v-e261b7a7 data-v-0430342e><div class="items" data-v-0430342e><!--[--><!--[--><!----><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-f294b04e data-v-cfa3e56c><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-cfa3e56c data-v-534bc2ea data-v-48850b97><span class="check" data-v-48850b97><span class="icon" data-v-48850b97><!--[--><span class="vpi-sun sun" data-v-534bc2ea></span><span class="vpi-moon moon" data-v-534bc2ea></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-f294b04e data-v-dcbce86c data-v-46044fd4><!--[--><a class="VPSocialLink no-icon" href="https://github.com/dcdy/vitepress-template" aria-label="github" target="_blank" rel="noopener" data-v-46044fd4 data-v-add20255><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://gitee.com/xia_mei_ting/vitepress-template" aria-label target="_blank" rel="noopener" data-v-46044fd4 data-v-add20255><svg t="1727428813465" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2268" width="200" height="200"><path d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z" fill="#C71D23" p-id="2269"></path></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-f294b04e data-v-be29ddb3 data-v-e261b7a7><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-e261b7a7><span class="vpi-more-horizontal icon" data-v-e261b7a7></span></button><div class="menu" data-v-e261b7a7><div class="VPMenu" data-v-e261b7a7 data-v-0430342e><!----><!--[--><!--[--><!----><div class="group" data-v-be29ddb3><div class="item appearance" data-v-be29ddb3><p class="label" data-v-be29ddb3>主题</p><div class="appearance-action" data-v-be29ddb3><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-be29ddb3 data-v-534bc2ea data-v-48850b97><span class="check" data-v-48850b97><span class="icon" data-v-48850b97><!--[--><span class="vpi-sun sun" data-v-534bc2ea></span><span class="vpi-moon moon" data-v-534bc2ea></span><!--]--></span></span></button></div></div></div><div class="group" data-v-be29ddb3><div class="item social-links" data-v-be29ddb3><div class="VPSocialLinks social-links-list" data-v-be29ddb3 data-v-46044fd4><!--[--><a class="VPSocialLink no-icon" href="https://github.com/dcdy/vitepress-template" aria-label="github" target="_blank" rel="noopener" data-v-46044fd4 data-v-add20255><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://gitee.com/xia_mei_ting/vitepress-template" aria-label target="_blank" rel="noopener" data-v-46044fd4 data-v-add20255><svg t="1727428813465" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2268" width="200" height="200"><path d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z" fill="#C71D23" p-id="2269"></path></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-f294b04e data-v-63d80599><span class="container" data-v-63d80599><span class="top" data-v-63d80599></span><span class="middle" data-v-63d80599></span><span class="bottom" data-v-63d80599></span></span></button></div></div></div></div><div class="divider" data-v-f294b04e><div class="divider-line" data-v-f294b04e></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-e7ae3156 data-v-3a585b62><div class="container" data-v-3a585b62><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-3a585b62><span class="vpi-align-left menu-icon" data-v-3a585b62></span><span class="menu-text" data-v-3a585b62>菜单</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-3a585b62 data-v-d6887fce><button data-v-d6887fce>回到顶部</button><!----></div></div></div><aside class="VPSidebar" data-v-e7ae3156 data-v-dbec4220><div class="curtain" data-v-dbec4220></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-dbec4220><span class="visually-hidden" id="sidebar-aria-label" data-v-dbec4220> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-3fb65e2d><section class="VPSidebarItem level-0 collapsible" data-v-3fb65e2d data-v-9529bbf6><div class="item" role="button" tabindex="0" data-v-9529bbf6><div class="indicator" data-v-9529bbf6></div><h2 class="text" data-v-9529bbf6>简介</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-9529bbf6><span class="vpi-chevron-right caret-icon" data-v-9529bbf6></span></div></div><div class="items" data-v-9529bbf6><!--[--><div class="VPSidebarItem level-1 is-link" data-v-9529bbf6 data-v-9529bbf6><div class="item" data-v-9529bbf6><div class="indicator" data-v-9529bbf6></div><a class="VPLink link link" href="/vitepress-template-public/guide/install" data-v-9529bbf6><!--[--><p class="text" data-v-9529bbf6>安装</p><!--]--></a><!----></div><!----></div><section class="VPSidebarItem level-1 collapsible" data-v-9529bbf6 data-v-9529bbf6><div class="item" role="button" tabindex="0" data-v-9529bbf6><div class="indicator" data-v-9529bbf6></div><h3 class="text" data-v-9529bbf6>配置</h3><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-9529bbf6><span class="vpi-chevron-right caret-icon" data-v-9529bbf6></span></div></div><div class="items" data-v-9529bbf6><!--[--><div class="VPSidebarItem level-2 is-link" data-v-9529bbf6 data-v-9529bbf6><div class="item" data-v-9529bbf6><div class="indicator" data-v-9529bbf6></div><a class="VPLink link link" href="/vitepress-template-public/guide/config-home" data-v-9529bbf6><!--[--><p class="text" data-v-9529bbf6>首页配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-9529bbf6 data-v-9529bbf6><div class="item" data-v-9529bbf6><div class="indicator" data-v-9529bbf6></div><a class="VPLink link link" href="/vitepress-template-public/guide/config-doc" data-v-9529bbf6><!--[--><p class="text" data-v-9529bbf6>文档配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-9529bbf6 data-v-9529bbf6><div class="item" data-v-9529bbf6><div class="indicator" data-v-9529bbf6></div><a class="VPLink link link" href="/vitepress-template-public/guide/config-other" data-v-9529bbf6><!--[--><p class="text" data-v-9529bbf6>其他配置</p><!--]--></a><!----></div><!----></div><!--]--></div></section><div class="VPSidebarItem level-1 is-link" data-v-9529bbf6 data-v-9529bbf6><div class="item" data-v-9529bbf6><div class="indicator" data-v-9529bbf6></div><a class="VPLink link link" href="/vitepress-template-public/guide/layout-slot" data-v-9529bbf6><!--[--><p class="text" data-v-9529bbf6>布局插槽</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-3fb65e2d><section class="VPSidebarItem level-0 collapsible has-active" data-v-3fb65e2d data-v-9529bbf6><div class="item" role="button" tabindex="0" data-v-9529bbf6><div class="indicator" data-v-9529bbf6></div><h2 class="text" data-v-9529bbf6>插件</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-9529bbf6><span class="vpi-chevron-right caret-icon" data-v-9529bbf6></span></div></div><div class="items" data-v-9529bbf6><!--[--><div class="VPSidebarItem level-1 is-link" data-v-9529bbf6 data-v-9529bbf6><div class="item" data-v-9529bbf6><div class="indicator" data-v-9529bbf6></div><a class="VPLink link link" href="/vitepress-template-public/guide/plugin/image" data-v-9529bbf6><!--[--><p class="text" data-v-9529bbf6>图片</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-9529bbf6 data-v-9529bbf6><div class="item" data-v-9529bbf6><div class="indicator" data-v-9529bbf6></div><a class="VPLink link link" href="/vitepress-template-public/guide/plugin/code" data-v-9529bbf6><!--[--><p class="text" data-v-9529bbf6>代码块</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-9529bbf6 data-v-9529bbf6><div class="item" data-v-9529bbf6><div class="indicator" data-v-9529bbf6></div><a class="VPLink link link" href="/vitepress-template-public/guide/plugin/style" data-v-9529bbf6><!--[--><p class="text" data-v-9529bbf6>样式美化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-9529bbf6 data-v-9529bbf6><div class="item" data-v-9529bbf6><div class="indicator" data-v-9529bbf6></div><a class="VPLink link link" href="/vitepress-template-public/guide/plugin/util" data-v-9529bbf6><!--[--><p class="text" data-v-9529bbf6>一些组件</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-3fb65e2d><section class="VPSidebarItem level-0 collapsible" data-v-3fb65e2d data-v-9529bbf6><div class="item" role="button" tabindex="0" data-v-9529bbf6><div class="indicator" data-v-9529bbf6></div><h2 class="text" data-v-9529bbf6>部署</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-9529bbf6><span class="vpi-chevron-right caret-icon" data-v-9529bbf6></span></div></div><div class="items" data-v-9529bbf6><!--[--><div class="VPSidebarItem level-1 is-link" data-v-9529bbf6 data-v-9529bbf6><div class="item" data-v-9529bbf6><div class="indicator" data-v-9529bbf6></div><a class="VPLink link link" href="/vitepress-template-public/guide/github-pages" data-v-9529bbf6><!--[--><p class="text" data-v-9529bbf6>Github Pages</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-e7ae3156 data-v-9d495596><div class="VPDoc has-sidebar has-aside" data-v-9d495596 data-v-09fc73c3><!--[--><!--]--><div class="container" data-v-09fc73c3><div class="aside" data-v-09fc73c3><div class="aside-curtain" data-v-09fc73c3></div><div class="aside-container" data-v-09fc73c3><div class="aside-content" data-v-09fc73c3><div class="VPDocAside" data-v-09fc73c3 data-v-f2095285><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-f2095285 data-v-5ec4093d><div class="content" data-v-5ec4093d><div class="outline-marker" data-v-5ec4093d></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-5ec4093d>页面导航</div><ul class="VPDocOutlineItem root" data-v-5ec4093d data-v-31939393><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-f2095285></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-09fc73c3><div class="content-container" data-v-09fc73c3><!--[--><!--]--><main class="main" data-v-09fc73c3><div style="position:relative;" class="vp-doc _vitepress-template-public_guide_plugin_image external-link-icon-enabled" data-v-09fc73c3><div><h1 id="图片" tabindex="-1">图片 <a class="header-anchor" href="#图片" aria-label="Permalink to &quot;图片&quot;">​</a></h1><p><span class="img-wrapper"><img src="/vitepress-template-public/image.jpg" alt="示例图" width="auto" height="auto" class="img-loading" onload="this.classList.remove(&#39;img-loading&#39;)" onerror="this.classList.remove(&#39;img-loading&#39;); this.classList.add(&#39;img-error&#39;)"></span></p><h2 id="样式-边框-加载" tabindex="-1">样式（边框，加载） <a class="header-anchor" href="#样式-边框-加载" aria-label="Permalink to &quot;样式（边框，加载）&quot;">​</a></h2><div class="vp-code-block-title"><div class="vp-code-block-title-bar"><span class="vp-code-block-title-text" data-title="config.mts">config.mts</span></div><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="复制代码" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes OneLight dark-plus vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C586C0;">export</span><span style="--shiki-light:#E45649;--shiki-dark:#C586C0;"> default</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;"> defineConfig</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">({</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">	markdown</span><span style="--shiki-light:#0184BC;--shiki-dark:#9CDCFE;">:</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> {</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">		image</span><span style="--shiki-light:#0184BC;--shiki-dark:#9CDCFE;">:</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> {</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">			// 默认禁用图片懒加载</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">			lazyLoading</span><span style="--shiki-light:#0184BC;--shiki-dark:#9CDCFE;">:</span><span style="--shiki-light:#986801;--shiki-dark:#569CD6;"> true</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">,</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">		},</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">		config</span><span style="--shiki-light:#0184BC;--shiki-dark:#9CDCFE;">:</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;"> md</span><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;"> =&gt;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> {</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">			// 为图片添加 img-wrapper 类</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">			md</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">renderer</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">rules</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">image</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> (</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">tokens</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">, </span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">idx</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">, </span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">options</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">, </span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">env</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">, </span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">self</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">) </span><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">=&gt;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> {</span></span>
<span class="line highlighted"><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">				const</span><span style="--shiki-light:#986801;--shiki-dark:#4FC1FF;"> token</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;"> tokens</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">[</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">idx</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">];</span></span>
<span class="line highlighted"><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">				const</span><span style="--shiki-light:#986801;--shiki-dark:#4FC1FF;"> src</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;"> token</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">attrGet</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&#39;src&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">);</span></span>
<span class="line highlighted"><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">				const</span><span style="--shiki-light:#986801;--shiki-dark:#4FC1FF;"> alt</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;"> token</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">content</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">				const</span><span style="--shiki-light:#986801;--shiki-dark:#4FC1FF;"> wh</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;"> token</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">attrs</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> &amp;&amp;</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;"> token</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">attrs</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">[</span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">2</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">] </span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;">?</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;"> token</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">attrs</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">[</span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">2</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">][</span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">0</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">] </span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;">:</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;"> &#39;auto&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">				const</span><span style="--shiki-light:#986801;--shiki-dark:#4FC1FF;"> w</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;"> wh</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">split</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&#39;,&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">)[</span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">0</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">];</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">				const</span><span style="--shiki-light:#986801;--shiki-dark:#4FC1FF;"> h</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;"> wh</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">split</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&#39;,&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">)[</span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">1</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">] </span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;">||</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;"> w</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">				// 排除不显示img-wrapper样式的图片（指定ignoreClassArr数组内域名、alt含有ignore和src含有ignore）</span></span>
<span class="line highlighted"><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">				let</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;"> ignoreClassArr</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> [</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&#39;https://img.shields.io&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">];</span></span>
<span class="line highlighted"><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">				let</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;"> imgParentClass</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;"> &#39;img-wrapper&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line highlighted"><span style="--shiki-light:#A626A4;--shiki-dark:#C586C0;">				if</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> (</span></span>
<span class="line highlighted"><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">					ignoreClassArr</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">some</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">item</span><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;"> =&gt;</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;"> src</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">?.</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">indexOf</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">item</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">) </span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;">!==</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> -</span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">1</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">) </span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;">||</span></span>
<span class="line highlighted"><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">					alt</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">indexOf</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&#39;ignore&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">) </span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;">!==</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> -</span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">1</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> ||</span></span>
<span class="line highlighted"><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">					src</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">?.</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">indexOf</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&#39;ignore&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">) </span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;">!==</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> -</span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">1</span></span>
<span class="line highlighted"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">				) {</span></span>
<span class="line highlighted"><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">					imgParentClass</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;"> &#39;img-wrapper-ignore&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line highlighted"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">				}</span></span>
<span class="line highlighted"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">				// 返回自定义的 HTML 结构，给图片加上 onerror 事件</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C586C0;">				return</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;"> `</span></span>
<span class="line highlighted"><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">			        &lt;span class=&quot;</span><span style="--shiki-light:#CA1243;--shiki-dark:#569CD6;">${</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">imgParentClass</span><span style="--shiki-light:#CA1243;--shiki-dark:#569CD6;">}</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&quot;&gt;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">			            &lt;img</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">			                src=&quot;</span><span style="--shiki-light:#CA1243;--shiki-dark:#569CD6;">${</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">src</span><span style="--shiki-light:#CA1243;--shiki-dark:#569CD6;">}</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&quot;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">			                alt=&quot;</span><span style="--shiki-light:#CA1243;--shiki-dark:#569CD6;">${</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">alt</span><span style="--shiki-light:#CA1243;--shiki-dark:#569CD6;">}</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&quot;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">                            width=&quot;</span><span style="--shiki-light:#CA1243;--shiki-dark:#569CD6;">${</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">w</span><span style="--shiki-light:#CA1243;--shiki-dark:#569CD6;">}</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&quot;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">				            height=&quot;</span><span style="--shiki-light:#CA1243;--shiki-dark:#569CD6;">${</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">h</span><span style="--shiki-light:#CA1243;--shiki-dark:#569CD6;">}</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&quot;</span></span>
<span class="line highlighted"><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">			                class=&quot;img-loading&quot;</span></span>
<span class="line highlighted"><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">			                onload=&quot;this.classList.remove(&#39;img-loading&#39;)&quot;</span></span>
<span class="line highlighted"><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">			                onerror=&quot;this.classList.remove(&#39;img-loading&#39;); this.classList.add(&#39;img-error&#39;)&quot;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">			            /&gt;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">			        &lt;/span&gt;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">			    `</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">			};</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">		},</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">	},</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br></div></div></div><div class="vp-code-block-title"><div class="vp-code-block-title-bar"><span class="vp-code-block-title-text" data-title="custom.css">custom.css</span></div><div class="language-css vp-adaptive-theme line-numbers-mode"><button title="复制代码" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes OneLight dark-plus vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">/**</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">   * Component: Img图片</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">   * -------------------------------------------------------------------------- */</span></span>
<span class="line"><span style="--shiki-light:#986801;--shiki-dark:#D7BA7D;">.img-wrapper</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> {</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#9CDCFE;">	position</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: </span><span style="--shiki-light:#383A42;--shiki-dark:#CE9178;">relative</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#9CDCFE;">	display</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: </span><span style="--shiki-light:#383A42;--shiki-dark:#CE9178;">block</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#9CDCFE;">	width</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: </span><span style="--shiki-light:#383A42;--shiki-dark:#CE9178;">fit-content</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#9CDCFE;">	margin</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: </span><span style="--shiki-light:#383A42;--shiki-dark:#CE9178;">auto</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#9CDCFE;">	padding</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: </span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">4px</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">	/* box-shadow: rgba(60, 61, 255, 0.1) 0px 1px 2px 0px, rgba(60, 61, 255, 0.1) 0px 2px 6px 2px; */</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">	/* filter: drop-shadow(0px 1px 2px rgba(60, 61, 255, 0.2)) drop-shadow(0px 2px 6px rgba(60, 61, 255, 0.2)); */</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">	/* box-shadow: rgb(85, 91, 255) 0px 0px 0px 2px, rgb(31, 193, 27) 0px 0px 0px 4px, rgb(255, 217, 19) 0px 0px 0px 6px,</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">		rgb(255, 156, 85) 0px 0px 0px 8px, rgb(255, 85, 85) 0px 0px 0px 10px; */</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">	/* filter: drop-shadow(0px 1px 0px rgba(85, 91, 255, 1)) drop-shadow(0px 2px 0px rgba(31, 193, 27, 1))</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">		drop-shadow(0px 4px 0px rgba(255, 217, 19, 1)) drop-shadow(0px 6px 24px rgba(255, 156, 85, 1))</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">		drop-shadow(0px 8px 0px rgba(255, 85, 85, 1)); */</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">	/* box-shadow: #bd34fe 0px 0px 0px 2px, #47caff 0px 0px 0px 4px; */</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">}</span></span>
<span class="line"><span style="--shiki-light:#986801;--shiki-dark:#D7BA7D;">.img-wrapper::before</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> {</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#9CDCFE;">	content</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&#39;&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#9CDCFE;">	width</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: </span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">100%</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#9CDCFE;">	height</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: </span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">100%</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#9CDCFE;">	border-radius</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: </span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">4px</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#9CDCFE;">	background-image</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: </span><span style="--shiki-light:#0184BC;--shiki-dark:#DCDCAA;">linear-gradient</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#0184BC;--shiki-dark:#DCDCAA;">var</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">--rotate</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">), </span><span style="--shiki-light:#986801;--shiki-dark:#CE9178;">#a805be</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">, </span><span style="--shiki-light:#986801;--shiki-dark:#CE9178;">#3c67e3</span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;"> 43%</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">, </span><span style="--shiki-light:#986801;--shiki-dark:#CE9178;">#4e00c2</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">);</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#9CDCFE;">	position</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: </span><span style="--shiki-light:#383A42;--shiki-dark:#CE9178;">absolute</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#9CDCFE;">	z-index</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: </span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">-1</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#9CDCFE;">	top</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: </span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">0%</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#9CDCFE;">	left</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: </span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">-0%</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#9CDCFE;">	animation</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: spin </span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">3s</span><span style="--shiki-light:#383A42;--shiki-dark:#CE9178;"> linear</span><span style="--shiki-light:#383A42;--shiki-dark:#CE9178;"> infinite</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">}</span></span>
<span class="line"><span style="--shiki-light:#986801;--shiki-dark:#D7BA7D;">.img-wrapper</span><span style="--shiki-light:#986801;--shiki-dark:#D7BA7D;"> .img-error</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> {</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#9CDCFE;">	background-color</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: </span><span style="--shiki-light:#0184BC;--shiki-dark:#DCDCAA;">var</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">--vp-c-neutral-inverse</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">);</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">}</span></span>
<span class="line"><span style="--shiki-light:#986801;--shiki-dark:#D7BA7D;">.img-wrapper</span><span style="--shiki-light:#986801;--shiki-dark:#D7BA7D;"> .img-loading</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> {</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#9CDCFE;">	position</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: </span><span style="--shiki-light:#383A42;--shiki-dark:#CE9178;">relative</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#9CDCFE;">	min-width</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: </span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">160px</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#9CDCFE;">	min-height</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: </span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">32px</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#9CDCFE;">	background-color</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: </span><span style="--shiki-light:#0184BC;--shiki-dark:#DCDCAA;">var</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">--vp-c-neutral-inverse</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">);</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">}</span></span>
<span class="line"><span style="--shiki-light:#986801;--shiki-dark:#D7BA7D;">.img-wrapper:has</span><span style="--shiki-light:#A626A4;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#986801;--shiki-dark:#D7BA7D;">.img-loading</span><span style="--shiki-light:#A626A4;--shiki-dark:#D4D4D4;">)</span><span style="--shiki-light:#986801;--shiki-dark:#D7BA7D;">::after</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> {</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#9CDCFE;">	content</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&#39;加载图片中...&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#9CDCFE;">	position</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: </span><span style="--shiki-light:#383A42;--shiki-dark:#CE9178;">absolute</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#9CDCFE;">	top</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: </span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">50%</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#9CDCFE;">	left</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: </span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">50%</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#9CDCFE;">	transform</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: </span><span style="--shiki-light:#0184BC;--shiki-dark:#DCDCAA;">translate</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">-50%</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">, </span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">-50%</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">);</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#9CDCFE;">	color</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: </span><span style="--shiki-light:#986801;--shiki-dark:#CE9178;">#999</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#9CDCFE;">	font-size</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: </span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">14px</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#9CDCFE;">	z-index</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: </span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">40</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">}</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C586C0;">@keyframes</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;"> spin</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> {</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">	0% {</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">		--rotate</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: </span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">0deg</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">	}</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">	100% {</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">		--rotate</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: </span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">360deg</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">	}</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">}</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C586C0;">@property</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> --rotate {</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#D4D4D4;">	syntax: &#39;&lt;angle</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">&gt;</span><span style="--shiki-light:#A626A4;--shiki-dark:#D4D4D4;">&#39;;</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#569CD6;">	initial-value</span><span style="--shiki-light:#A626A4;--shiki-dark:#D4D4D4;">: 132deg;</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#D4D4D4;">	inherits: false;</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#D4D4D4;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br></div></div></div><h2 id="指定图片不显示边框" tabindex="-1">指定图片不显示边框 <a class="header-anchor" href="#指定图片不显示边框" aria-label="Permalink to &quot;指定图片不显示边框&quot;">​</a></h2><div class="note custom-block github-alert"><p class="custom-block-title">提醒</p><p></p><ol><li>默认图片地址包含<code>https://img.shields.io（徽标）</code>地址的图片不显示边框。可以往<code>ignoreClassArr</code>数组中添加其他要排除边框的地址</li><li>图片 alt 属性中含有<code>ignore</code>关键字的图片不显示边框。例如<code>![示例图ignore](/image.jpg)</code></li><li>图片 src 属性中含有<code>ignore</code>关键字的图片不显示边框。例如<code>![示例图](/image.jpg?ignore)</code></li></ol></div><p><span class="img-wrapper-ignore"><img src="/vitepress-template-public/image.jpg?ignore" alt="示例图" width="200" height="200" class="img-loading" onload="this.classList.remove(&#39;img-loading&#39;)" onerror="this.classList.remove(&#39;img-loading&#39;); this.classList.add(&#39;img-error&#39;)"></span></p><h2 id="点击放大和滚轮放大缩小" tabindex="-1">点击放大和滚轮放大缩小 <a class="header-anchor" href="#点击放大和滚轮放大缩小" aria-label="Permalink to &quot;点击放大和滚轮放大缩小&quot;">​</a></h2><h3 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-label="Permalink to &quot;安装&quot;">​</a></h3><p>地址：<a href="https://github.com/francoischalifour/medium-zoom" target="_blank" rel="noreferrer">https://github.com/francoischalifour/medium-zoom</a></p><div class="language-shell vp-adaptive-theme line-numbers-mode"><button title="复制代码" class="copy"></button><span class="lang">shell</span><pre class="shiki shiki-themes OneLight dark-plus vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">pnpm</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;"> add</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;"> medium-zoom</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="配置" tabindex="-1">配置 <a class="header-anchor" href="#配置" aria-label="Permalink to &quot;配置&quot;">​</a></h3><div class="vp-code-block-title"><div class="vp-code-block-title-bar"><span class="vp-code-block-title-text" data-title="index.ts">index.ts</span></div><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="复制代码" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes OneLight dark-plus vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C586C0;">import</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> { </span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">onMounted</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">watch</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">nextTick</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> } </span><span style="--shiki-light:#A626A4;--shiki-dark:#C586C0;">from</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;"> &#39;vue&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C586C0;">import</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> { </span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">useRoute</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> } </span><span style="--shiki-light:#A626A4;--shiki-dark:#C586C0;">from</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;"> &#39;vitepress&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C586C0;">import</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;"> mediumZoom</span><span style="--shiki-light:#A626A4;--shiki-dark:#C586C0;"> from</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;"> &#39;medium-zoom&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C586C0;">export</span><span style="--shiki-light:#E45649;--shiki-dark:#C586C0;"> default</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> {</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">	// ,,,</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">	setup</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">() {</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">		const</span><span style="--shiki-light:#986801;--shiki-dark:#4FC1FF;"> route</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;"> useRoute</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">();</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">		let</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;"> initScale</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;"> 1</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">		// 初始化图片缩放</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">		const</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;"> initZoom</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> () </span><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">=&gt;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> {</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">			// mediumZoom(&#39;[data-zoomable]&#39;, { background: &#39;var(--vp-c-bg)&#39; }); // 默认</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">			const</span><span style="--shiki-light:#986801;--shiki-dark:#4FC1FF;"> zoomInstance</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;"> mediumZoom</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&#39;.main img&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">, { </span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">background</span><span style="--shiki-light:#0184BC;--shiki-dark:#9CDCFE;">:</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;"> &#39;var(--vp-c-bg)&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> });</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">			// 监听点击放大图片</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">			zoomInstance</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">on</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&#39;open&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">, () </span><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">=&gt;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> {</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">				document</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">body</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">style</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">overflow</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;"> &#39;hidden&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">				document</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">body</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">style</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">paddingRight</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;"> &#39;17px&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">				nextTick</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(() </span><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">=&gt;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> {</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">					const</span><span style="--shiki-light:#986801;--shiki-dark:#4FC1FF;"> image</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;"> document</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">querySelector</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&#39;.medium-zoom-image--opened&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">) </span><span style="--shiki-light:#383A42;--shiki-dark:#C586C0;">as</span><span style="--shiki-light:#C18401;--shiki-dark:#4EC9B0;"> HTMLElement</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C586C0;">					if</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> (</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">image</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">) {</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">						document</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">body</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">style</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">overflow</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;"> &#39;hidden&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">						// 获取初始的 transform 样式</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">						let</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;"> initTransform</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;"> image</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">style</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">transform</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> ||</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;"> &#39;scale(1)&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">						const</span><span style="--shiki-light:#986801;--shiki-dark:#4FC1FF;"> initScaleMatch</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;"> initTransform</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">match</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#0184BC;--shiki-dark:#D16969;">/scale</span><span style="--shiki-light:#0184BC;--shiki-dark:#D7BA7D;">\(</span><span style="--shiki-light:#0184BC;--shiki-dark:#CE9178;">(</span><span style="--shiki-light:#986801;--shiki-dark:#CE9178;">[</span><span style="--shiki-light:#0184BC;--shiki-dark:#CE9178;">^</span><span style="--shiki-light:#986801;--shiki-dark:#D16969;">)</span><span style="--shiki-light:#986801;--shiki-dark:#CE9178;">]</span><span style="--shiki-light:#0184BC;--shiki-dark:#D7BA7D;">+</span><span style="--shiki-light:#0184BC;--shiki-dark:#CE9178;">)</span><span style="--shiki-light:#0184BC;--shiki-dark:#D7BA7D;">\)</span><span style="--shiki-light:#0184BC;--shiki-dark:#D16969;">/</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">);</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">						initScale</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;"> initScaleMatch</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> ?</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;"> parseFloat</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">initScaleMatch</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">[</span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">1</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">]) </span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;">:</span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;"> 1</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">; </span><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">// 获取初始缩放比例，默认为 1</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">						// 添加滚轮缩放功能</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">						image</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">addEventListener</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&#39;wheel&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">, (</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">event</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;">:</span><span style="--shiki-light:#C18401;--shiki-dark:#4EC9B0;"> WheelEvent</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">) </span><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">=&gt;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> {</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">							const</span><span style="--shiki-light:#986801;--shiki-dark:#4FC1FF;"> currentTransform</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;"> image</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">style</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">transform</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> ||</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;"> &#39;scale(1)&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">; </span><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">// 默认值为 scale(1)</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">							const</span><span style="--shiki-light:#986801;--shiki-dark:#4FC1FF;"> scaleMatch</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;"> currentTransform</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">match</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#0184BC;--shiki-dark:#D16969;">/scale</span><span style="--shiki-light:#0184BC;--shiki-dark:#D7BA7D;">\(</span><span style="--shiki-light:#0184BC;--shiki-dark:#CE9178;">(</span><span style="--shiki-light:#986801;--shiki-dark:#CE9178;">[</span><span style="--shiki-light:#0184BC;--shiki-dark:#CE9178;">^</span><span style="--shiki-light:#986801;--shiki-dark:#D16969;">)</span><span style="--shiki-light:#986801;--shiki-dark:#CE9178;">]</span><span style="--shiki-light:#0184BC;--shiki-dark:#D7BA7D;">+</span><span style="--shiki-light:#0184BC;--shiki-dark:#CE9178;">)</span><span style="--shiki-light:#0184BC;--shiki-dark:#D7BA7D;">\)</span><span style="--shiki-light:#0184BC;--shiki-dark:#D16969;">/</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">);</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">							const</span><span style="--shiki-light:#986801;--shiki-dark:#4FC1FF;"> currentScale</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;"> scaleMatch</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> ?</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;"> parseFloat</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">scaleMatch</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">[</span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">1</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">]) </span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;">:</span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;"> 1</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">; </span><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">// 获取当前缩放比例，默认为 1</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">							// 阻止浏览器的默认缩放行为</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">							event</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">preventDefault</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">();</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">							// 根据滚轮方向进行放大或缩小</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C586C0;">							if</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> (</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">event</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">deltaY</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> &gt;</span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;"> 0</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">) {</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">								// 缩小图片</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">								zoomOut</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">image</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">currentTransform</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">currentScale</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">);</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">							} </span><span style="--shiki-light:#A626A4;--shiki-dark:#C586C0;">else</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> {</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">								// 放大图片</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">								zoomIn</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">image</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">currentTransform</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">currentScale</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">);</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">							}</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">						});</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">					}</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">				});</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">			});</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">			// 还原图片</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">			zoomInstance</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">on</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&#39;close&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">, () </span><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">=&gt;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> {</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">				document</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">body</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">style</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">overflow</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;"> &#39;auto&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">				document</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">body</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">style</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">paddingRight</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;"> &#39;0px&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">			});</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">		};</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">		// 放大图片</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">		const</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;"> zoomIn</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> (</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">image</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;">:</span><span style="--shiki-light:#C18401;--shiki-dark:#4EC9B0;"> HTMLElement</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">, </span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">currentTransform</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#4EC9B0;"> string</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">, </span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">currentScale</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#4EC9B0;"> number</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">) </span><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">=&gt;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> {</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">			// 增加缩放值，并保持其他 transform 属性不变</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">			const</span><span style="--shiki-light:#986801;--shiki-dark:#4FC1FF;"> newScale</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;"> Math</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">min</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">currentScale</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> +</span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;"> 0.1</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">initScale</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> +</span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;"> 5</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">); </span><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">// 限制最大缩放为 5 倍</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">			image</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">style</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">transform</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;"> currentTransform</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">replace</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#0184BC;--shiki-dark:#D16969;">/scale</span><span style="--shiki-light:#0184BC;--shiki-dark:#D7BA7D;">\(</span><span style="--shiki-light:#986801;--shiki-dark:#CE9178;">[</span><span style="--shiki-light:#0184BC;--shiki-dark:#CE9178;">^</span><span style="--shiki-light:#986801;--shiki-dark:#D16969;">)</span><span style="--shiki-light:#986801;--shiki-dark:#CE9178;">]</span><span style="--shiki-light:#0184BC;--shiki-dark:#D7BA7D;">+\)</span><span style="--shiki-light:#0184BC;--shiki-dark:#D16969;">/</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">, </span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">`scale(</span><span style="--shiki-light:#CA1243;--shiki-dark:#569CD6;">${</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">newScale</span><span style="--shiki-light:#CA1243;--shiki-dark:#569CD6;">}</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">)`</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">);</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">		};</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">		// 缩小图片</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">		const</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;"> zoomOut</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> (</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">image</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;">:</span><span style="--shiki-light:#C18401;--shiki-dark:#4EC9B0;"> HTMLElement</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">, </span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">currentTransform</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#4EC9B0;"> string</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">, </span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">currentScale</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#4EC9B0;"> number</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">) </span><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">=&gt;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> {</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">			// 减小缩放值，并保持其他 transform 属性不变</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">			const</span><span style="--shiki-light:#986801;--shiki-dark:#4FC1FF;"> newScale</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;"> Math</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">max</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">currentScale</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> -</span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;"> 0.1</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">, </span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">0.5</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">); </span><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">// 限制最小缩放为 0.5 倍</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">			image</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">style</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">transform</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;"> currentTransform</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">replace</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#0184BC;--shiki-dark:#D16969;">/scale</span><span style="--shiki-light:#0184BC;--shiki-dark:#D7BA7D;">\(</span><span style="--shiki-light:#986801;--shiki-dark:#CE9178;">[</span><span style="--shiki-light:#0184BC;--shiki-dark:#CE9178;">^</span><span style="--shiki-light:#986801;--shiki-dark:#D16969;">)</span><span style="--shiki-light:#986801;--shiki-dark:#CE9178;">]</span><span style="--shiki-light:#0184BC;--shiki-dark:#D7BA7D;">+\)</span><span style="--shiki-light:#0184BC;--shiki-dark:#D16969;">/</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">, </span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">`scale(</span><span style="--shiki-light:#CA1243;--shiki-dark:#569CD6;">${</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">newScale</span><span style="--shiki-light:#CA1243;--shiki-dark:#569CD6;">}</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">)`</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">);</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">		};</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">		onMounted</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(() </span><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">=&gt;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> {</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">			initZoom</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">();</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">		});</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">		watch</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">			() </span><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">=&gt;</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;"> route</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">path</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">,</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">			() </span><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">=&gt;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> {</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">				nextTick</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(() </span><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">=&gt;</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;"> initZoom</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">());</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">			}</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">		);</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">	},</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">};</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br></div></div></div><div class="vp-code-block-title"><div class="vp-code-block-title-bar"><span class="vp-code-block-title-text" data-title="custom.css">custom.css</span></div><div class="language-css vp-adaptive-theme line-numbers-mode"><button title="复制代码" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes OneLight dark-plus vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">/**</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">   * Component: Img图片</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">   * -------------------------------------------------------------------------- */</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">/* 图片放大查看 */</span></span>
<span class="line"><span style="--shiki-light:#986801;--shiki-dark:#D7BA7D;">.medium-zoom-overlay</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> {</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#9CDCFE;">	z-index</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: </span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">30</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#986801;--shiki-dark:#D7BA7D;">.medium-zoom-image</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> {</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#9CDCFE;">	z-index</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">: </span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">31</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div></div><h2 id="指定图片大小" tabindex="-1">指定图片大小 <a class="header-anchor" href="#指定图片大小" aria-label="Permalink to &quot;指定图片大小&quot;">​</a></h2><h3 id="配置-1" tabindex="-1">配置 <a class="header-anchor" href="#配置-1" aria-label="Permalink to &quot;配置&quot;">​</a></h3><div class="vp-code-block-title"><div class="vp-code-block-title-bar"><span class="vp-code-block-title-text" data-title="config.mts">config.mts</span></div><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="复制代码" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes OneLight dark-plus vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C586C0;">export</span><span style="--shiki-light:#E45649;--shiki-dark:#C586C0;"> default</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;"> defineConfig</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">({</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">	markdown</span><span style="--shiki-light:#0184BC;--shiki-dark:#9CDCFE;">:</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> {</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">		image</span><span style="--shiki-light:#0184BC;--shiki-dark:#9CDCFE;">:</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> {</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">			// 默认禁用图片懒加载</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">			lazyLoading</span><span style="--shiki-light:#0184BC;--shiki-dark:#9CDCFE;">:</span><span style="--shiki-light:#986801;--shiki-dark:#569CD6;"> true</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">,</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">		},</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">		config</span><span style="--shiki-light:#0184BC;--shiki-dark:#9CDCFE;">:</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;"> md</span><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;"> =&gt;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> {</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">			// 为图片添加 img-wrapper 类</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">			md</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">renderer</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">rules</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">image</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> (</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">tokens</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">, </span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">idx</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">, </span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">options</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">, </span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">env</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">, </span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">self</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">) </span><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">=&gt;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> {</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">				const</span><span style="--shiki-light:#986801;--shiki-dark:#4FC1FF;"> token</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;"> tokens</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">[</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">idx</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">];</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">				const</span><span style="--shiki-light:#986801;--shiki-dark:#4FC1FF;"> src</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;"> token</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">attrGet</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&#39;src&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">);</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">				const</span><span style="--shiki-light:#986801;--shiki-dark:#4FC1FF;"> alt</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;"> token</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">content</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"></span>
<span class="line highlighted"><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">				const</span><span style="--shiki-light:#986801;--shiki-dark:#4FC1FF;"> wh</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;"> token</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">attrs</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> &amp;&amp;</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;"> token</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">attrs</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">[</span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">2</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">] </span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;">?</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;"> token</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">attrs</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">[</span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">2</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">][</span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">0</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">] </span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;">:</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;"> &#39;auto&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line highlighted"><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">				const</span><span style="--shiki-light:#986801;--shiki-dark:#4FC1FF;"> w</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;"> wh</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">split</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&#39;,&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">)[</span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">0</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">];</span></span>
<span class="line highlighted"><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">				const</span><span style="--shiki-light:#986801;--shiki-dark:#4FC1FF;"> h</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;"> wh</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">split</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&#39;,&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">)[</span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">1</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">] </span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;">||</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;"> w</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">				// 排除不显示img-wrapper样式的图片（指定ignoreClassArr数组内域名、alt含有ignore和src含有ignore）</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">				let</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;"> ignoreClassArr</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> [</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&#39;https://img.shields.io&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">];</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">				let</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;"> imgParentClass</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;"> &#39;img-wrapper&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C586C0;">				if</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> (</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">					ignoreClassArr</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">some</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">item</span><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;"> =&gt;</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;"> src</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">?.</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">indexOf</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">item</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">) </span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;">!==</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> -</span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">1</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">) </span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;">||</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">					alt</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">indexOf</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&#39;ignore&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">) </span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;">!==</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> -</span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">1</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> ||</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">					src</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">?.</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">indexOf</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&#39;ignore&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">) </span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;">!==</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> -</span><span style="--shiki-light:#986801;--shiki-dark:#B5CEA8;">1</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">				) {</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">					imgParentClass</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;"> &#39;img-wrapper-ignore&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">				}</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">				// 返回自定义的 HTML 结构，给图片加上 onerror 事件</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C586C0;">				return</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;"> `</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">			        &lt;span class=&quot;</span><span style="--shiki-light:#CA1243;--shiki-dark:#569CD6;">${</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">imgParentClass</span><span style="--shiki-light:#CA1243;--shiki-dark:#569CD6;">}</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&quot;&gt;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">			            &lt;img</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">			                src=&quot;</span><span style="--shiki-light:#CA1243;--shiki-dark:#569CD6;">${</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">src</span><span style="--shiki-light:#CA1243;--shiki-dark:#569CD6;">}</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&quot;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">			                alt=&quot;</span><span style="--shiki-light:#CA1243;--shiki-dark:#569CD6;">${</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">alt</span><span style="--shiki-light:#CA1243;--shiki-dark:#569CD6;">}</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&quot;</span></span>
<span class="line highlighted"><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">                            width=&quot;</span><span style="--shiki-light:#CA1243;--shiki-dark:#569CD6;">${</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">w</span><span style="--shiki-light:#CA1243;--shiki-dark:#569CD6;">}</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&quot;</span></span>
<span class="line highlighted"><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">				            height=&quot;</span><span style="--shiki-light:#CA1243;--shiki-dark:#569CD6;">${</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">h</span><span style="--shiki-light:#CA1243;--shiki-dark:#569CD6;">}</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&quot;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">			                class=&quot;img-loading&quot;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">			                onload=&quot;this.classList.remove(&#39;img-loading&#39;)&quot;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">			                onerror=&quot;this.classList.remove(&#39;img-loading&#39;); this.classList.add(&#39;img-error&#39;)&quot;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">			            /&gt;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">			        &lt;/span&gt;</span></span>
<span class="line"><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">			    `</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">			};</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">		},</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">	},</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br></div></div></div><h3 id="使用" tabindex="-1">使用 <a class="header-anchor" href="#使用" aria-label="Permalink to &quot;使用&quot;">​</a></h3><div class="note custom-block github-alert"><p class="custom-block-title">提醒</p><p></p><p>在图片后添加{w,h}。例如<code>![alt](src){200,300}</code>，<mark>中间不要有空格</mark></p><p>其中 w（200）是指定的宽度，h（300）是指定图片的宽度；</p><p>只写一个值，代表宽高都是该值。例如<code>![alt](src){200}</code>，宽高就都是 200px；</p><p>不写值默认 auto</p></div><div class="language-markdown vp-adaptive-theme line-numbers-mode"><button title="复制代码" class="copy"></button><span class="lang">markdown</span><pre class="shiki shiki-themes OneLight dark-plus vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">![</span><span style="--shiki-light:#4078F2;--shiki-dark:#CE9178;">示例图</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">]</span><span style="--shiki-light:#A626A4;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#A626A4;--shiki-dark:#D4D4D4;--shiki-light-text-decoration:inherit;--shiki-dark-text-decoration:underline;">/image.jpg</span><span style="--shiki-light:#A626A4;--shiki-dark:#D4D4D4;">)</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">{200,100}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p><span class="img-wrapper"><img src="/vitepress-template-public/image.jpg" alt="示例图" width="200" height="100" class="img-loading" onload="this.classList.remove(&#39;img-loading&#39;)" onerror="this.classList.remove(&#39;img-loading&#39;); this.classList.add(&#39;img-error&#39;)"></span></p><div class="language-markdown vp-adaptive-theme line-numbers-mode"><button title="复制代码" class="copy"></button><span class="lang">markdown</span><pre class="shiki shiki-themes OneLight dark-plus vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">![</span><span style="--shiki-light:#4078F2;--shiki-dark:#CE9178;">示例图</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">]</span><span style="--shiki-light:#A626A4;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#A626A4;--shiki-dark:#D4D4D4;--shiki-light-text-decoration:inherit;--shiki-dark-text-decoration:underline;">/image.jpg</span><span style="--shiki-light:#A626A4;--shiki-dark:#D4D4D4;">)</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">{100}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p><span class="img-wrapper"><img src="/vitepress-template-public/image.jpg" alt="示例图" width="100" height="100" class="img-loading" onload="this.classList.remove(&#39;img-loading&#39;)" onerror="this.classList.remove(&#39;img-loading&#39;); this.classList.add(&#39;img-error&#39;)"></span></p><h2 id="完整预览插件-image-viewer" tabindex="-1">完整预览插件 image-viewer <a class="header-anchor" href="#完整预览插件-image-viewer" aria-label="Permalink to &quot;完整预览插件 image-viewer&quot;">​</a></h2><p><span class="img-wrapper"><img src="https://github.com/T-miracle/vitepress-plugin-image-viewer/raw/main/demo.webp" alt="image-viewer" width="auto" height="auto" class="img-loading" onload="this.classList.remove(&#39;img-loading&#39;)" onerror="this.classList.remove(&#39;img-loading&#39;); this.classList.add(&#39;img-error&#39;)"></span></p><h3 id="安装-1" tabindex="-1">安装 <a class="header-anchor" href="#安装-1" aria-label="Permalink to &quot;安装&quot;">​</a></h3><p>地址：<a href="https://github.com/T-miracle/vitepress-plugin-image-viewer?tab=readme-ov-file" target="_blank" rel="noreferrer">https://github.com/T-miracle/vitepress-plugin-image-viewer?tab=readme-ov-file</a></p><div class="caution custom-block github-alert"><p class="custom-block-title">注意</p><p></p><p>如果用的是 npm 或者 yarn，就不用安装 viewerjs</p></div><div class="language-shell vp-adaptive-theme line-numbers-mode"><button title="复制代码" class="copy"></button><span class="lang">shell</span><pre class="shiki shiki-themes OneLight dark-plus vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">pnpm</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;"> add</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;"> vitepress-plugin-image-viewer</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">pnpm</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;"> add</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;"> viewerjs</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="配置-2" tabindex="-1">配置 <a class="header-anchor" href="#配置-2" aria-label="Permalink to &quot;配置&quot;">​</a></h3><div class="note custom-block github-alert"><p class="custom-block-title">提醒</p><p></p><p>imageViewer<code>()</code> 接收三个参数：</p><ul><li><p>route</p><p>路由（这是必需的）</p></li><li><p>el</p><p>CSS 选择器（默认<code>.vp-doc</code>，可以为空不填写，这不是必需的）</p></li><li><p>option</p><p>配置选项（详细配置请看<a href="https://github.com/fengyuanchen/viewerjs#toolbar" target="_blank" rel="noreferrer">viewerjs option</a>，已有默认配置，这不是必需的）</p></li></ul></div><div class="vp-code-block-title"><div class="vp-code-block-title-bar"><span class="vp-code-block-title-text" data-title="index.ts">index.ts</span></div><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="复制代码" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes OneLight dark-plus vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C586C0;">import</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;"> &#39;viewerjs/dist/viewer.min.css&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C586C0;">import</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;"> imageViewer</span><span style="--shiki-light:#A626A4;--shiki-dark:#C586C0;"> from</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;"> &#39;vitepress-plugin-image-viewer&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C586C0;">export</span><span style="--shiki-light:#E45649;--shiki-dark:#C586C0;"> default</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> {</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">	setup</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">() {</span></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#569CD6;">		const</span><span style="--shiki-light:#986801;--shiki-dark:#4FC1FF;"> route</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;"> =</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;"> useRoute</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">();</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">		imageViewer</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">route</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">		// ...</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">	},</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">};</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div></div><h3 id="扩展组件" tabindex="-1">扩展组件 <a class="header-anchor" href="#扩展组件" aria-label="Permalink to &quot;扩展组件&quot;">​</a></h3><p><code>vImageViewer</code> 组件能编译成一个按钮，点击这个按钮能弹出图片，使用方式如下：</p><div class="vp-code-block-title"><div class="vp-code-block-title-bar"><span class="vp-code-block-title-text" data-title="index.ts">index.ts</span></div><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="复制代码" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes OneLight dark-plus vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C586C0;">import</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;"> vImageViewer</span><span style="--shiki-light:#A626A4;--shiki-dark:#C586C0;"> from</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;"> &#39;vitepress-plugin-image-viewer/lib/vImageViewer.vue&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C586C0;">export</span><span style="--shiki-light:#E45649;--shiki-dark:#C586C0;"> default</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> {</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">	// ...</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">	enhanceApp</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">ctx</span><span style="--shiki-light:#0184BC;--shiki-dark:#D4D4D4;">:</span><span style="--shiki-light:#0184BC;--shiki-dark:#4EC9B0;"> any</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">) {</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">		DefaultTheme</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">enhanceApp</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">ctx</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">);</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">		// 注册全局组件，如果你不想使用也可以不添加</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#9CDCFE;">		ctx</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">app</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#DCDCAA;">component</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">(</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&#39;vImageViewer&#39;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">, </span><span style="--shiki-light:#E45649;--shiki-dark:#9CDCFE;">vImageViewer</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">);</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-dark:#6A9955;--shiki-light-font-style:italic;--shiki-dark-font-style:inherit;">		// ...</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">	},</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">};</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div></div><p>inline<code>属性设置为</code>true<code>，那么它会变成一个行内元素，他不是必需的，默认为 </code>false</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="复制代码" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes OneLight dark-plus vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#808080;">&lt;</span><span style="--shiki-light:#E45649;--shiki-dark:#569CD6;">vImageViewer</span><span style="--shiki-light:#986801;--shiki-dark:#9CDCFE;"> src</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&quot;图片地址&quot;</span><span style="--shiki-light:#986801;--shiki-dark:#9CDCFE;"> alt</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#CE9178;">&quot;描述内容&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;"> :</span><span style="--shiki-light:#986801;--shiki-dark:#9CDCFE;">inline</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">=</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">&quot;</span><span style="--shiki-light:#986801;--shiki-dark:#569CD6;">false</span><span style="--shiki-light:#383A42;--shiki-dark:#D4D4D4;">&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#808080;"> /&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-09fc73c3 data-v-a242629a><!--[--><!--[--><!--[--><!--[--><div style="display:none;" class="vitepress-backTop-main" title="返回顶部" data-v-62b2871c><svg t="1720595052079" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4279" width="200" height="200" data-v-62b2871c><path d="M752.736 431.063C757.159 140.575 520.41 8.97 504.518 0.41V0l-0.45 0.205-0.41-0.205v0.41c-15.934 8.56-252.723 140.165-248.259 430.653-48.21 31.457-98.713 87.368-90.685 184.074 8.028 96.666 101.007 160.768 136.601 157.287 35.595-3.482 25.232-30.31 25.232-30.31l12.206-50.095s52.47 80.569 69.304 80.528c15.114-1.23 87-0.123 95.6 0h0.82c8.602-0.123 80.486-1.23 95.6 0 16.794 0 69.305-80.528 69.305-80.528l12.165 50.094s-10.322 26.83 25.272 30.31c35.595 3.482 128.574-60.62 136.602-157.286 8.028-96.665-42.475-152.617-90.685-184.074z m-248.669-4.26c-6.758-0.123-94.781-3.359-102.891-107.192 2.95-98.714 95.97-107.438 102.891-107.93 6.964 0.492 99.943 9.216 102.892 107.93-8.11 103.833-96.174 107.07-102.892 107.192z m-52.019 500.531c0 11.838-9.42 21.382-21.012 21.382a21.217 21.217 0 0 1-21.054-21.34V821.74c0-11.797 9.421-21.382 21.054-21.382 11.591 0 21.012 9.585 21.012 21.382v105.635z m77.333 57.222a21.504 21.504 0 0 1-21.34 21.626 21.504 21.504 0 0 1-21.34-21.626V827.474c0-11.96 9.543-21.668 21.299-21.668 11.796 0 21.38 9.708 21.38 21.668v157.082z m71.147-82.043c0 11.796-9.42 21.34-21.053 21.34a21.217 21.217 0 0 1-21.013-21.34v-75.367c0-11.755 9.421-21.299 21.013-21.299 11.632 0 21.053 9.544 21.053 21.3v75.366z" fill="#FFF" p-id="4280" data-v-62b2871c></path></svg></div><!--]--><!--]--><!--]--><!--]--><div class="edit-info" data-v-a242629a><div class="edit-link" data-v-a242629a><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/dcdy/vitepress-template/edit/main/docs/guide/plugin/image.md" target="_blank" rel="noreferrer" data-v-a242629a><!--[--><span class="vpi-square-pen edit-link-icon" data-v-a242629a></span> 在 GitHub 上编辑此页面<!--]--></a></div><div class="last-updated" data-v-a242629a><p class="VPLastUpdated" data-v-a242629a data-v-6712e2c8>最后更新于: <time datetime="2024-12-10T08:22:50.000Z" data-v-6712e2c8></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-a242629a><span class="visually-hidden" id="doc-footer-aria-label" data-v-a242629a>Pager</span><div class="pager" data-v-a242629a><a class="VPLink link pager-link prev" href="/vitepress-template-public/guide/layout-slot" data-v-a242629a><!--[--><span class="desc" data-v-a242629a>上一页</span><span class="title" data-v-a242629a>布局插槽</span><!--]--></a></div><div class="pager" data-v-a242629a><a class="VPLink link pager-link next" href="/vitepress-template-public/guide/plugin/code" data-v-a242629a><!--[--><span class="desc" data-v-a242629a>下一页</span><span class="title" data-v-a242629a>代码块</span><!--]--></a></div></nav></footer><!--[--><!--[--><!--[--><!----><!--]--><!--]--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-e7ae3156 data-v-34aa0b55><div class="container" data-v-34aa0b55><p class="message" data-v-34aa0b55>基于MIT许可发布</p><p class="copyright" data-v-34aa0b55>版权所有 © 2024 dcdyxmt@163.com</p></div></footer><!--[--><!--]--></div></div>
    
    
  </body>
</html>